<template>
    <div>
         <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="请假职工" prop="EmployeesName">
                <el-input v-model="model.EmployeesName" :readonly="true" @focus="getEmployees"></el-input>
            </el-form-item>
              <el-form-item label="请假类型" prop="LeaveType" >
               <el-select v-model="model.LeaveType" placeholder="请选择请假类型">
                    <el-option label="事假" value="事假"></el-option>
                    <el-option label="病假" value="病假"></el-option>
                    <el-option label="年假/休假" value="年假/休假"></el-option>
                    <el-option label="婚假" value="婚假"></el-option>
                    <el-option label="产假" value="产假"></el-option>
                    <el-option label="调休假" value="调休假"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="请假原因" prop="Reason">
               <el-input type="textarea" :rows="2.5" placeholder="请输入内容" v-model="model.Reason"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="StartTime">
                 <el-date-picker v-model="model.StartTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="EndTime">
                 <el-date-picker v-model="model.EndTime" type="datetime" placeholder="选择日期时间" @blur="timeBlur"></el-date-picker>
            </el-form-item>
            <el-form-item label="请假天数" prop="Day">
                <el-input  placeholder="请输入内容" v-model="model.Day" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="请假结果" prop="Result">
                <el-radio-group v-model="model.Result">
                    <el-radio label="0">进行中</el-radio>
                    <el-radio label="1">已审批</el-radio>
                     <el-radio label="2">已拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
              <el-form-item label="流程Id" prop="WorkflowId">
                <el-input v-model="model.WorkflowId"></el-input>
            </el-form-item>
            <el-form-item class="page-box-footer">
                <el-button type="primary" @click="submitForm">{{isUpdate?'立即保存':'立即创建'}}</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <el-dialog append-to-body :close-on-click-modal="false" title="选择员工" :visible.sync="dialogDomain.dialogVisible" width="80%">
            <SelectedPerson :PersonList="PersonList" :IsFirst="true" :IsDefault="true" @callback="callback"/>
        </el-dialog>
    </div>
</template>

<script>
import SelectedPerson from '@/views/Plans/PlansView/components/SelectedPerson.vue';
export default {
    components:{
        SelectedPerson
    },
   props: {
        model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data(){
        return{
             BpmOaLeaveList:[],
             PersonList:[],
             dialogDomain:{
                dialogVisible:false
             },
            rules:{
                 EmployeesName: { required: true, message: '请选择员工' },
                 LeaveType: { required: true, message: '请选择请假类型', trigger: 'blur' },
                 Reason: { required: true, message: '请输入请假原因', trigger: 'blur' },
                 StartTime: { required: true, message: '请选择开始时间', trigger: 'blur' },
                 EndTime: { required: true, message: '请选择结束时间', trigger: 'blur' },
                 Day: { required: true, message: '请输入请假天数', trigger: 'blur' },
                 Result: { required: true, message: '请选择请假结果', trigger: 'blur' },
                 
            }
        }
    },
    created(){
        this.getBpmOaLeaveAll();
    },
    methods:{
        timeBlur(){
            if(this.model.StartTime!='' && this.model.StartTime!=undefined && this.model.EndTime!='' && this.model.EndTime!=undefined){
                var startDate = new Date(this.model.StartTime);
                var endDate = new Date(this.model.EndTime);

                // 计算两个日期之间的毫秒数差距
                var timeDiff = endDate.getTime() - startDate.getTime();
                // 将毫秒数转换为天数
                var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));

                this.model.Day=daysDiff;
            }
        },
        callback(){
            console.log(this.PersonList);
            this.model.EmployeesName = this.PersonList[0].Name;
            this.model.EmployeesId = this.PersonList[0].Id;
            this.dialogDomain.dialogVisible=false;
        },
        getEmployees(){
            this.PersonList=[];
            this.dialogDomain.dialogVisible=true;
        },
        submitForm(){
               this.$refs['ruleForm'].validate((valid)=>{
                if(valid){
                    if(this.isUpdate){
                        this.put();
                    }
                    else{
                        this.add();
                    }
                } else{
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        resetForm() {
        this.$refs['ruleForm'].resetFields();
    },
        //新增
    add(){
        this.$http.postForm('/api/BpmOaLeave',{model:this.model},{loading:this.$loading()})
        .then(res=>{
            this.$emit('callback');
        })
    },

    //修改
    put(){
        this.$http.putForm('/api/BpmOaLeave',{model:this.model},{loading:this.$loading()})
		.then((res)=>{
            this.$emit('callback');
		})
    },
        getBpmOaLeaveAll(){
            this.$http.get('/api/BpmOaLeave/GetAll')
            .then(res=>{
                this.BpmOaLeaveList=res.Data;
            })
        }
    }
}
</script>

<style>

</style>